<template>

	<div>
		<div id="map" style="width: 100vw; height: 100vh;"></div>
		<div>


		</div>
	</div>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'
	import {
		DoGetShopByIdApi
	} from '@/api/order.js';
	import {
		ResponseCode
	} from "@/api/enum"



	export default {

		setup() {
			
			const errorMsg = ref('');
			const route = useRoute()
			const origin = ref({
				lat: 0,
				lng: 0
			});
			let map = ref({})
			let destination = ref({
				lat: 11.56958,
				lng: 104.92103
			}); // 目标坐标（示例：上海中心）

			//根据shop id 获取shop信息
			const getShopInfo = async (id) => {
				const res = await DoGetShopByIdApi({
					"shop_id": id
				})

				if (res.code === ResponseCode.OK) {
					if (res.data.shop !== null) {
						destination.value = {
							lat: res.data.shop.lat,
							lng: res.data.shop.lng
						}
					}
				} else {
					//Msg.error(res.message)
				}
			}

			const getParam = (value) => {

				var query = location.search.substring(1);
				var hash = location.hash.split("?");
				if (!query && hash.length < 2) {
					return '';
				}
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == value) {
						return pair[1];
					}
				}
				if (!hash[1]) {
					return '';
				}
				vars = hash[1].split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == value) {
						return pair[1];
					}
				}
				return '';

			}

			const getCurrentLocation = () => {
				if (!navigator.geolocation) {
					errorMsg.value = '浏览器不支持定位功能';
					return;
				}
				navigator.geolocation.getCurrentPosition(
					(pos) => {

						origin.value = {
							lat: pos.coords.latitude,
							lng: pos.coords.longitude
						};

						const script = document.createElement("script");
						script.src =
							`https://maps.googleapis.com/maps/api/js?key=AIzaSyD_77WYRLyHWS9YEVv_FjSQxhvi-tIfLxw&callback=initMap&libraries=drawing,places`;
						script.async = true;
						document.head.appendChild(script);

						window.initMap = async () => {
							map = new google.maps.Map(document.getElementById("map"), {
								center: origin.value,
								zoom: 12,
							});

							const id = getParam('shop_id')
							console.log(id, '=====')
							await getShopInfo(id)
							getRoute()
						};

					},
					(err) => {
						errorMsg.value = `定位失败：${err.message}`;
					}, {
						enableHighAccuracy: true,
						timeout: 8000
					}
				);
			};

			const getRoute = () => {
				const directionsService = new google.maps.DirectionsService();
				const directionsRenderer = new google.maps.DirectionsRenderer();
				directionsRenderer.setMap(map);

				const request = {
					origin: origin.value,
					destination: destination.value,
					travelMode: google.maps.TravelMode.DRIVING,
				};


				directionsService.route(request, (result, status) => {
					if (status === google.maps.DirectionsStatus.OK) {
						directionsRenderer.setDirections(result);
					} else {
						alert("无法获取路线： " + status);
					}
					uni.hideLoading()
				});
			};
			getCurrentLocation()


			



			onMounted(() => {
				uni.showLoading({
					title: ''
				});
			})



			return {
				origin,
				destination,
				getRoute,
				map
			};
		},

	}
</script>